<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>spark log count</title>
    <script src="js/echarts.js"></script>
    <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
    <script src="js/vue.js"></script>
	<link rel="stylesheet" href="css/style.css" type="text/css" />
</head>
<body>
<div id="app">
    <!-- <div style="text-align: center;font-size: 30px;">Spark Log Count</div> -->
	<div style="display: flex;flex-direction: row;padding-bottom: 20px;">
	    <div style="flex: 1;">
	        <div class="textCenter value">{{(current.pv/(1024 * 1024)).toFixed(2)}} 
				M
			</div>
	        <div class="textCenter">累计访问量</div>
	    </div>
	    <div style="flex: 1;">
	        <div class="textCenter value">{{current.uv}}</div>
	        <div class="textCenter">独立访客数</div>
	    </div>
		<div style="flex: 1;">
		    <div class="textCenter value">
				<select v-model="currentDay">
					<option value="2013-05-30">2013-05-30</option>
					<option value="2013-05-31">2013-05-31</option>
				</select>
			</div>
		    <div class="textCenter">数据日期</div>
		</div>
	    <div style="flex: 1;">
	        <div class="textCenter value">{{current.pu}}</div>
	        <div class="textCenter">人均浏览页面数</div>
	    </div>
	    <div style="flex: 1;">
	        <div class="textCenter value">{{current.pp}}</div>
	        <div class="textCenter">平均浏览深度</div>
	    </div>
	</div>
    <div style="display: flex;flex-direction: row;">
        <div style="flex: 3;">
            <div>
                <div class="allnavLeft" id="leftTop"></div>
            </div>
        </div>
        <div style="flex: 3;" style="position: relative;">
            <div class="allnav" id="rightTop"></div>
            <div class="allnav" id="rightBottom"></div>
        </div>
    </div>
</div>
<script type="text/javascript">
    new Vue({
        el: '#app',
        data: function () {
            return {
				//汇总
                current: {
                    pv: 0,
                    uv: 0,
                    pu: 0,
                    pp: 0
                },
				currentDay: '2013-05-31'
            }
        },
        methods: {
            loadPv() {
                axios.get(`pv?time=${this.currentDay}`)
                    .then(
                        res => {
							var pvData = [], pvTime = []
                            for (let item of res.data) {
								pvData.push(parseInt(item.pv))
								pvTime.push(item.time.replace(this.currentDay, ''))
                            }
                            var myChartTop = echarts.init(document.getElementById("leftTop"))
							var seriesTop = []
                            seriesTop.push({name: '', type: "line", data: pvData})
                            var optionTop = {
                                title: {
                                    text: '当天累计访问量趋势',
                                    textStyle: {
                                        color: '#FFF'
                                    }
                                },
                                xAxis: {
                                    type: 'category',
                                    data: pvTime,
                                    axisLabel: {
                                        textStyle: {
                                            color: "rgba(255,255,255,.6)",
                                            fontSize: '12'
                                        }
                                    }
                                },
                                yAxis: {
                                    type: 'value',
									scale: true,
                                    axisLabel: {
                                        textStyle: {
                                            color: "rgba(255,255,255,.6)",
                                            fontSize: '12'
                                        },
                                        formatter: function (value, index) {
											var limit = 1024 * 1024
                                            if (value >= limit) {
                                                value = (value / limit).toFixed(0) + 'M'
                                            } else if (value < limit) {
                                                value = value
                                            }
                                            return value
                                        }
                                    }
                                },
                                series: seriesTop,
                                grid: [{
                                    left: 50
                                }]
                            }
                            myChartTop.setOption(optionTop)
                        }
                    )
            },
			loadUv() {
			    axios.get(`uv?time=${this.currentDay}`)
			        .then(
			            res => {
							var pvData = [], pvTime = []
			                for (let item of res.data) {
								pvData.push(parseInt(item.uv))
								pvTime.push(item.time.replace(this.currentDay, ''))
			                }
			                var myChart = echarts.init(document.getElementById("rightTop"))
							var seriesTop = []
			                seriesTop.push({name: '', type: "line", data: pvData})
			                var optionTop = {
			                    title: {
			                        text: '当天独立访客数趋势',
			                        textStyle: {
			                            color: '#FFF'
			                        }
			                    },
			                    xAxis: {
			                        type: 'category',
			                        data: pvTime,
			                        axisLabel: {
			                            textStyle: {
			                                color: "rgba(255,255,255,.6)",
			                                fontSize: '12'
			                            }
			                        }
			                    },
			                    yAxis: {
			                        type: 'value',
									scale: true,
			                        axisLabel: {
			                            textStyle: {
			                                color: "rgba(255,255,255,.6)",
			                                fontSize: '12'
			                            }
			                        }
			                    },
			                    series: seriesTop,
			                    grid: [{
			                        left: 50
			                    }]
			                }
			                myChart.setOption(optionTop)
			            }
			        )
			},
			loadIp() {
			    axios.get(`ip?time=${this.currentDay}`)
			        .then(
			            res => {
							var pvData = [], pvTime = []
			                for (let item of res.data) {
								pvData.push(parseInt(item.ip))
								pvTime.push(item.time.replace(this.currentDay, ''))
			                }
			                var myChart = echarts.init(document.getElementById("rightBottom"))
							var seriesTop = []
			                seriesTop.push({name: '', type: "line", data: pvData})
			                var optionTop = {
			                    title: {
			                        text: '当天Ip访问量趋势',
			                        textStyle: {
			                            color: '#FFF'
			                        }
			                    },
			                    xAxis: {
			                        type: 'category',
			                        data: pvTime,
			                        axisLabel: {
			                            textStyle: {
			                                color: "rgba(255,255,255,.6)",
			                                fontSize: '12'
			                            }
			                        }
			                    },
			                    yAxis: {
			                        type: 'value',
									scale: true,
			                        axisLabel: {
			                            textStyle: {
			                                color: "rgba(255,255,255,.6)",
			                                fontSize: '12'
			                            }
			                        }
			                    },
			                    series: seriesTop,
			                    grid: [{
			                        left: 50
			                    }]
			                }
			                myChart.setOption(optionTop)
			            }
			        )
			},
            loadCount () {
                axios.get(`count?time=${this.currentDay}`).then(
                    res => {
						Object.assign(this.current, res.data)
                    }
                ).catch(function (error) {
					console.log(error);
				})
            }
        },
        mounted() {
			axios.defaults.baseURL = 'http://localhost:9527/log/'
			this.loadCount()
			this.loadPv()
			this.loadUv()
			this.loadIp()
        },
		watch: {
			currentDay () {
				this.loadCount()
				this.loadPv()
				this.loadUv()
				this.loadIp()
			}
		}
    })
</script>
</body>
</html>
